<template>
    <div id="app">
      <Head class="top">快速求职</Head>
      <div class="centent" >
        <div class="searchdiv">
          <img src="../../assets/images/cityinfo/list/list_6.png"/>
          <input
            class="input"
            type="text"
            v-model="keyword"
            placeholder="请输入关键词"
          />
          <div class="ts_btn" v-if="keyword.length>0" @click.stop="doSearch">搜索</div>
        </div>
        <van-list
          class="list"
          v-model="loading"
          :finished="finished"
          :finished-text="finished_text"
          @load="onLoad"
          :immediate-check="false"
          v-if="show_empty != true"
        >
          <div class="item" v-for="(item,index) in list" :key="index" @click="detail(item.id)">
            <img src="../../assets/images/fast/top.png" v-if="item.is_top===1"/>
            <img src="../../assets/images/fast/recommend.png" v-if="item.is_top!=1&&item.is_recommend===1"/>
            <div class="top">
              <div class="title">{{item.wantjob}}</div>
              <div class="time">{{item.refreshtime_cn}}</div>
            </div>
            <div class="contactname">
              {{item.fullname}} · {{item.sex==2?'女':'男'}} · {{item.experience}}经验
            </div>
            <div class="describe">
              {{item.content}}
            </div>
            <div class="btndiv" v-if="!show_contact">
              <div>登录看联系方式</div>
              <div class="login" @click.stop="showLogin = true">登录</div>
            </div>
            <div class="contactcall" v-if="show_contact">
              <div class="phone">联系电话：<span>{{item.telephone}}</span></div>
              <div class="call" @click.stop="contactHim(item.telephone)"></div>
            </div>
          </div>
        </van-list>
        <van-empty
          image="search"
          description="没有找到对应的数据"
          v-if="show_empty === true"
        />
      </div>
      <div class="right_btn">
        <div class="btn release" @click="show=true">我要<br/>发布</div>
        <!-- <div class="btn top" @click="top">顶部</div> -->
      </div>
      <van-popup v-model="show" round closeable position="center">
        <div class="popudiv">
          <div class="title">发布求职简历</div>
          <div class="tisp">如果您是保安、保姆、勤杂工等普工人才，无需注册、快速发布求职简历。</div>
          <div class="seldiv" :class="seldiv=='1'?'sel':''" @click="sel('1')">免注册发布普工简历</div>
          <div class="tisp two">如果您不是普工类人才，建议您注册成为个人求职会员，享受更专业的求职服务。</div>
          <div class="seldiv" :class="seldiv=='2'?'sel':''" @click="sel('2')">注册个人求职者会员</div>
          <div class="btn" @click="publish">去发布</div>
        </div>
      </van-popup>
      <BottomNav></BottomNav>
      <van-popup
          v-model="showLogin"
          position="right"
          :overlay="false"
          style="width:100%;height:100%"
        >
          <Login
            :utype="2"
            :single_login="true"
            @afterLogin="afterLogin"
            :after_login_data="after_login_data"
            :goback_custom="true"
            @gobackCustomMethod="closeLogin"
          ></Login>
        </van-popup>
    </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
import Login from '@/components/Login'
import wxshare from '@/assets/js/share.js'

export default {
  components: {
    Login
  },
  data () {
    return {
      show: false,
      Search: false,
      keyword: '',
      seldiv: '1',
      loading: false,
      finished: false,
      finished_text: '',
      page: 1,
      pagesize: 15,
      show_empty: false,
      show_contact: false,
      params: {
      },
      list: [],
      showLogin: false,
      is_personal_login: false,
      after_login_data: {}
    }
  },
  created () {
    this.is_personal_login = this.$store.state.LoginOrNot === true
    if (this.$store.state.config.fast_resume_contact === '0') {
      this.show_contact = true
    } else {
      if (this.is_personal_login) {
        this.show_contact = true
      }
    }
    this.fetchData(true)
    wxshare({}, 'fast_resumelist', location.href)
  },
  methods: {
    doSearch () {
      this.fetchData(true)
    },
    top () {
      window.scrollTo(0, 0)
    },
    detail (id) {
      this.$router.push('/fast/resume/' + id)
    },
    sel (num) {
      this.seldiv = num
    },
    publish () {
      if (this.seldiv == '1') {
        this.$router.push('/fast/resumeadd')
      } else {
        this.$router.push('/member/reg/personal')
      }
    },
    onLoad () {
      this.page++
      this.fetchData(false)
    },
    fetchData (init) {
      this.show_empty = false
      let conditions = { ...this.params }
      if (init === true) {
        this.page = 1
        this.finished_text = ''
        this.finished = false
      }
      conditions.page = this.page
      conditions.pagesize = this.pagesize
      conditions.keywords = this.keyword
      this.loading = true
      http
        .get(api.fast_resumelist, conditions)
        .then((res) => {
          if (init === true) {
            this.list = [...res.data.list]
          } else {
            this.list = this.list.concat(res.data.list)
          }
          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (res.data.list.length < this.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.list.length === 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    afterLogin (data) {
      this.showLogin = false
      this.is_personal_login = true
      this.show_contact = true
      let method = null
      if (data.method !== undefined) {
        method = data.method
      }
      this.fetchData(method)
    },
    closeLogin () {
      this.showLogin = false
    },
    contactHim (phone) {
      location.href = `tel:${phone}`
    }
  }
}
</script>
<style lang="scss" scoped>
.centent{
  width: 100vw;
  height: calc(100vh - 48px - 60px);
  background: url("../../assets/images/fast/fastlist_bg.png") 0 0 no-repeat;
  background-size: 100vw 121px;
  background-color: #f7f7f7;
  padding-top: 110px;
  .searchdiv {
    height: 38px;
    border-radius: 30px;
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 12px;
    background-color: #ffffff;
    box-shadow: 0px 1px 7px rgba($color: #dddddd, $alpha: 1);
    display: flex;
    align-items: center;
    position: relative;
    img {
      margin-right: 8px;
      width: 15px;
      height: 15px;
    }
    .input {
      &::placeholder {
        color: #b4bdc9;
      }
      font-size: 15px;
      position: absolute;
      left: 35px;
      width: calc(100% - 50px);
      padding: 7px 0;
      font-size: 12px;
      color: #666666;
      top: 50%;
      transform: translate(0, -50%);
      border: 0;
      line-height: 1;
      background-color: transparent;
    }
    .ts_btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
      padding: 18px 0;
      text-align: center;
      width: 56px;
      font-size: 14px;
      color: #333333;
    }
  }
  .list{
    padding-top: 15px;
    margin-bottom: 55px;
    .item{
      margin-left: 16px;
      margin-right: 16px;
      margin-bottom: 15px;
      box-shadow: 0px 0px 10px rgba($color: #dddddd, $alpha: 1);
      border-radius: 6px;
      background-color: #ffffff;
      font-size: 13px;
      padding: 18px;
      position: relative;
      img{
        position: absolute;
        width: 35px;
        height: 35px;
        top:0;
        left: 0;
      }
      .top{
        display: flex;
        position: relative;
        .title{
          width: calc(100vw - 150px);
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .time{
          position: absolute;
          right: 0;
          color: #999999;
          font-size: 13px;
        }
      }
      .describe{
        color: #999999;
        margin-top: 7px;
        line-height: 1.8;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .contactname{
        color: #666666;
        margin-top: 15px;
      }
      .btndiv{
        color: #666666;
        margin-top: 10px;
        display: flex;
        position: relative;
        align-items: center;
        .login{
          width: 45px;
          height: 22px;
          position: absolute;
          right: 0;
          color: #0c81fa;
          border: 1px solid #0c81fa;
          border-radius: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .contactcall{
        height: 39px;
        position: relative;
        display: flex;
        align-items: center;
        .phone{
          span{
            font-size: 15px;
            color: #ff3944;
          }
        }
        .call{
          position: absolute;
          right: 0;
          width: 39px;
          height: 39px;
          background: url("../../assets/images/fast/icon_call.png") 0 0 no-repeat;
          background-size: 39px 39px;
        }
      }
    }
  }
}
.right_btn{
  position: fixed;
  bottom: 100px;
  right: 10px;
  .btn{
    width: 45px;
    height: 45px;
    margin-top: 15px;
    border-radius: 50%;
    box-shadow: 0px 0px 12px rgba($color: #0c81fa, $alpha: 1);
    background-color: #0c81fa;
    color: #ffffff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    &.top{
      background: url("../../assets/images/fast/right_bg.png") center 7px no-repeat #0c81fa;
      background-size: 15px 16px;
      padding-top: 22px;
    }
  }
}
.popudiv{
  width: 85vw;
  background-color: #ffffff;
  text-align: center;
  .title{
    margin-top: 18px;
    font-size: 15px;
    color: #666666;
    font-weight: bold;
  }
  .tisp{
    padding-top: 15px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    color: #4b4b4b;
    &.two{
      margin-top: 15px;
      border-top: 1px dashed #cccccc;
    }
  }
  .seldiv{
    margin-top: 15px;
    margin-left: 16px;
    margin-right: 16px;
    height: 37px;
    border: 1px solid #777777;
    border-radius: 2px;
    color: #4b4b4b;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    &.sel{
      border-color: #1787fb;
      color: #1787fb;
      background: url("../../assets/images/fast/sel_bg.png") bottom right no-repeat #f7fbff;
      background-size: 15px 15px;
    }
  }
  .btn{
    margin-top: 20px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 15px;
    height: 37px;
    border-radius: 50px;
    color: #FFFFFF;
    background-color: #1787fb;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
